<template>
    <div class="main-container">
        <div id="head">
            <div id="image_container">
                <img src="../assets/testHeaderIcon.png" alt="">
            </div>
            <div id="userInfo">
                <div class="userInfoItem">
                    <img src="../assets/userIcon.png" alt="">
                    <span>{{userName}}</span>
                </div>
                <div class="userInfoItem">
                    <img src="../assets/locateIcon.png" alt="">
                    <span>{{location}}</span>
                </div>
            </div>

        </div>
        <div id="tag">
            <span class="tagLabel" v-for="tag in tags.data" v-bind:key="tag">
                {{tag}}
            </span>
        </div>
    </div>
</template>

<script setup>

import {defineProps, onMounted, reactive} from 'vue';

let tags = reactive({
    data:[]
})


// eslint-disable-next-line no-unused-vars
const props = defineProps({
    userName: {
        type: String,
        required: true
    },
    headIcon: {
        type: String,
        required: true
    },
    location: {
        type: String,
        required: true
    },
    tagStr: {
        type: String,
        required: true
    },
});

onMounted(()=>{
    tags.data = props.tagStr.split('|')
})

</script>

<style scoped>

    .main-container {
        width: 220px;
        height: 150px;
        border-radius: 10px;
        padding: 8px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        background-color: #1900ff59;
        transition: background-color 0.4s ease ,transform 0.3s, box-shadow 0.3s;;
    }

    .main-container:hover {
        background-color: rgba(0, 217, 255, 0.7);
        transform: scale(1.05);
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.49);
    }
    #head {
        display: flex;
        align-items: center;
    }
    #head > span{
        display: block;
    }

    #image_container {
        width: 60px;
        height: 60px;
        overflow: hidden;
        background-color: #D8E0EA;
        border-radius: 100px;
        border: 1px lightgray solid;
    }
    /*用户信息*/
    #userInfo {
        display: inline-block;
    }
    .userInfoItem{
        display: flex;
        flex-direction: row;
        width: 100px;
        margin: 5px 5px;
        align-items: center;
        background-color: white;
        border-radius: 8px;
    }
    .userInfoItem > img {
        height: 15px;
        width: 15px;
        margin: 0 5px;
    }
    .userInfoItem > span {
        color: black;
        font-size: 15px;
        padding: 2px;
    }

    #image_container > img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }

    /*标签信息*/
    .tagLabel {
        display: inline-block;
        background-color: #3500ff8a;
        margin: 5px;
        width: 40px;
        text-align: center;
        border-radius: 8px;
        padding: 2px;
        color: white;
        font-family: 黑体,serif;
        font-size: 16px;
    }
</style>